import React,{Component} from 'react';


import {observer,inject} from "mobx-react";
import {computed,toJS} from "mobx";
import {Link} from "react-router-dom";

import {View} from "../component/index";
import {
  FileImageOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  CheckOutlined
} from '@ant-design/icons';
import {Select,
  Input,
  Button,
  Modal,
  Popover,
  Tree,
  Table,
  Cascader,
  Upload,
  Image
} from "antd";
import moment from "moment";

const { Option } = Select;
const {TreeNode} = Tree;
const { Search,TextArea } = Input;



const style={
  formItem:{
    marginBottom:10,
    alignItems:"center"
  }
};


// 学生认证
@inject(["store"])
@observer
class Student extends Component{
  constructor(props){
    super(props);
    this.store = props.store;
    this.student = props.store.storeStudent;
  }
  
  componentDidMount(){
    this.store.navigation({page:"Student"});
    console.log(this.data.length);
    if(!this.data.length){
      this.student.init();
    }
  }
  
  @computed get height(){return this.store.height;}
  @computed get website(){return this.store.website;}
  @computed get rootPath(){return this.store.rootPath;}

  @computed get loading(){return this.student.loading;}
  // 分页数据
  @computed get data() {return toJS(this.student.paging.data);}
  // 查询
  @computed get where() {return this.student.where;}
  @computed get tid() {return this.student.tid;}
  // 分页
  @computed get pagination(){
    return {current:Number(this.student.paging.nowPage),total:Number(this.student.paging.maxNum),pageSize:Number(this.student.paging.num)};
  }


  render(){
    const columns = [
      {title: "编号",dataIndex: "id",width:"10%"},
      {title: "用户ID",dataIndex: "uid",width:"10%"},

      {title: "身份证正面",dataIndex: "codecard1",width:"10%",render:text=><Image style={{width:60,height:"auto"}} src={text} />},
      {title: "身份证反面",dataIndex: "codecard2",width:"10%",render:text=><Image style={{width:60,height:"auto"}} src={text} />},
      {title: "学生证",dataIndex: "student",width:"10%",render:text=><Image style={{width:60,height:"auto"}} src={text} />},
      
      {title: "审核状态",dataIndex: "status",width:"10%",render:text=><span>{["未审核","已审核"][text]}</span>},
      {title: "创建时间",dataIndex: "createtime",width:"10%",render:text=>moment.unix(text).format("YYYY-MM-DD")},
 
      {title: "相关操作",width:"15%",key: "form",
        render: (text ,record)=> {
          return(
            <View>
              {
                record.status != 1?
                <Button
                  onClick={()=>this.student.by(record.id)}
                  shape="circle"
                  title="审核通过"
                  icon={<CheckOutlined />}
                />:
                null
              }
              
              <Button
                onClick={()=>{
                  Modal.confirm({
                    title: "删除",
                    content: "删除这条认证信息？",
                    onOk:()=>this.student.delete(record.id),
                    // onCancel() {},
                  });
                }}
                icon={<DeleteOutlined />}
                style={{margin:"0 10px"}}
                type="danger"
                shape="circle"
                title="删除"
              />
            </View>
          );
        } 
      },
    ];
    return(
      <View style={{height:this.height-50,width:"100%",overflow:"hidden",flexDirection:"column"}}>
        <View 
          style={{
            borderBottom:"1px #eee solid",
            height:50,
            alignItems:"center",
            background:"#f2f2f2"
          }}>
          <Select
            defaultValue="0"
            onChange={v=>this.student.set("where-field",v)}
            style={{width:"100px",margin:"0 5px"}}
            >
            <Option value="0">选择类型</Option>
            <Option value="tit">用户编号</Option>
          </Select>
          <Select
            defaultValue="0"
            onChange={v=>this.student.set("where-condition",v)}
            style={{width:100,margin:"0 5px"}}
            >
            <Option value="0">选择条件</Option>
            <Option value="=">等于查询</Option>
            <Option value="like">模糊查询</Option>
          </Select>
          <Search
            placeholder="输入查询内容"
            onSearch={value => this.student.search(value)}
            style={{ width: 250 }}
            value={this.where.value}
            onChange={(e)=>this.student.set("where-value",e.target.value)}
            enterButton
          />
          <Button onClick={()=>this.student.init()}  style={{margin:"0 5px 0 20px"}}>所有数据</Button>
        </View>
        <Table
          scroll={{y:this.height-180,x:"100%"}}
          loading={this.loading}
          rowKey={record => record.id}
          columns={columns}
          dataSource={this.data}
          pagination={this.pagination}
          onChange={pagination=>this.student.page(pagination.current)}
        />
      </View>
    );
  }
}

export default Student;